<template>
    <div class="left-box" v-loading="loading">
        <router-link to="/console/" class="logo pic">
            <img src="@/assets/logo.png" />
        </router-link>
        <div class="btn-list">
            <template v-for="(value, key, index) in langList" :key="key">
                <span class="space" v-if="index !== 0"> | </span>
                <el-button link @click="switchLangHandle(key)">{{ value }}</el-button>
            </template>
        </div>
        <p>{{ $t('forget_pwd.tip_1') }}</p>
        <el-form>
            <el-form-item size="large" prop="account">
                <el-input v-model="form.account" :placeholder="$t('forgetPwd.account_placeholder')" prefix-icon="User" />
            </el-form-item>
            <el-form-item size="large" prop="email">
                <el-input v-model="form.email" :placeholder="$t('forgetPwd.email_placeholder')" prefix-icon="Message" />
            </el-form-item>
            <el-button size="large" class="login-btn" color="#F06423" @click="searchHandle" v-if="form.account || form.email">{{ $t('forgetPwd.btn1_text') }}</el-button>
        </el-form>
        <p class="copyright">Copyright © 2025 The Education University of Hong Kong</p>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

import { useI18n } from 'vue-i18n'
import { setLocale, langList } from '@/locales/i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'

import AuthService from '@/api/auth'

import { goPage } from '@/utils/global'

const { locale, t } = useI18n<{ message: MessageSchema }, SupportedLocales>()
const loading = ref(false)

// 语言切换
const switchLangHandle = (lang: SupportedLocales) => {
    setLocale(lang)
    locale.value = lang
}

// 表单
const form = reactive({
    account: localStorage.getItem('account') || '',
    email: '',
})
const searchHandle = () => {
    loading.value = true
    let data: any = {
        send_email: true,
    }
    if (form.account) data.account = form.account
    if (form.email) data.email = form.email

    AuthService.searchAccount(data)
        .then(() => {
            goPage('/forgetPwd/continue')
        })
        .finally(() => {
            loading.value = false
        })
}
</script>
